@extends('admin.layouts.head')

@section('content')
    <body>
    <div id="app">
        <div class="wrapper -header-fixed">

        @include('admin.layouts.navbar')
        @include('admin.layouts.sidebar')

        <!-- 内容页开始-->
            <div class="content-container">
                <div class="container-fluid">
                    <div class="page-content">

                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">仪表盘</a></li>
                                <li class="breadcrumb-item active" aria-current="page">客服列表</li>
                            </ol>
                        </nav>
                        @verbatim
                        <div class="card">
                            <div class="card-body">

                                <div id="vueApp">
                                    <div class="content-box">

                                        <div class="top-bar" style="padding: 20px 0;">
                                            <el-button type="primary" @click="editKf({})">添加客服</el-button>
                                        </div>


                                        <el-table
                                            :data="dataList"
                                            border
                                            size="mini"
                                            style="width: 100%">
                                            <el-table-column
                                                prop="id"
                                                label="ID"
                                                width="80"
                                            >
                                            </el-table-column>
                                            <el-table-column
                                                prop="nickname"
                                                label="名称"
                                            >
                                            </el-table-column>
                                            <el-table-column
                                                prop="level_name"
                                                label="客服等级"
                                            >
                                            </el-table-column>
                                            <el-table-column
                                                prop=""
                                                label="操作"
                                                width="280"
                                            >
                                                <template slot-scope="scope">
                                                    <el-button @click="editKf(scope.row)" type="primary" round plain size="small">编辑</el-button>
                                                    <el-button style="margin-left: 10px;" @click="bindUserShow(scope.row)" type="success" round plain size="small">绑定用户</el-button>
                                                    <el-button style="margin-left: 10px;" @click="setPwd(scope.row)" type="danger" round plain size="small">修改密码</el-button>
                                                </template>
                                            </el-table-column>

                                        </el-table>


                                        <!-- 保存窗口 -->
                                        <el-dialog
                                            title="保存客服"
                                            :visible.sync="saveShow"
                                            width="600"
                                        >
                                            <div class="save-win" style="margin-right: 30px;">
                                                <el-form ref="saveForm" :model="saveForm" label-width="100px">
                                                    <el-form-item label="名称">
                                                        <el-input v-model="saveForm.nickname"></el-input>
                                                    </el-form-item>
                                                    <el-form-item label="客服等级">
                                                        <el-select v-model="saveForm.level_id" placeholder="请选择">
                                                            <el-option
                                                                v-for="item in levelList"
                                                                :key="item.id"
                                                                :label="item.name"
                                                                :value="item.id">
                                                            </el-option>
                                                        </el-select>
                                                    </el-form-item>
                                                    <el-form-item>
                                                        <el-button type="primary" @click="saveKf">保存</el-button>
                                                        <el-button @click="saveShow=false">取消</el-button>
                                                    </el-form-item>
                                                </el-form>
                                            </div>
                                        </el-dialog>

                                        <!-- 保存窗口 -->
                                        <el-dialog
                                            title="绑定用户"
                                            :visible.sync="bindShow"
                                            width="600"
                                        >
                                            <div class="save-win" style="margin-right: 30px;">
                                                <el-form ref="saveForm" :model="bindForm" label-width="100px">
                                                    <el-form-item label="unionid">
                                                        <el-input v-model="bindForm.unionid"></el-input>
                                                    </el-form-item>
                                                    <el-form-item>
                                                        <el-button type="primary" @click="bindUser">绑定</el-button>
                                                        <el-button @click="saveShow=false">取消</el-button>
                                                    </el-form-item>
                                                </el-form>
                                            </div>
                                        </el-dialog>


                                    </div>

                            </div> <!-- .card-body -->
                        </div> <!-- .card -->
                        @endverbatim
                    </div> <!-- .page-content -->
                </div> <!-- .container-fluid -->
            </div> <!-- .content-container -->
        </div> <!-- .wrapper -->
    </div> <!-- #app -->

    @include('admin.layouts.vuehead')

    <script>
        const vueApp = new Vue({
            el: '#vueApp',
            data() {
                return {
                    queryForm: {

                    },
                    dataList: [],
                    saveShow: false,
                    saveForm: {
                        id : 0,
                        nickname: "",
                        level_id: 0,
                    },
                    levelList: [],
                    bindForm: {
                        service_id: 0,
                        unionid: ''
                    },
                    bindShow: false,
                }
            },
            mounted() {
                this.getList()
                this.getLevel()
            },
            watch: {

            },
            methods: {
                getList() {
                    adminApi_getCustomServiceList(this.queryForm).then(res => {
                        this.dataList = res.data
                    })
                },
                getLevel() {
                    adminApi_getCustomServiceLevelList({}).then(res => {
                        this.levelList = res.data
                    })
                },
                saveKf() {
                    adminApi_saveCustomService(this.saveForm).then(res => {
                        this.$message.success('保存成功')
                        this.saveShow = false
                        this.getList()
                    })
                },
                editKf(row) {
                    this.saveForm = row
                    this.saveShow = true
                },
                bindUserShow(row) {
                    this.bindShow = true
                    this.bindForm.service_id = row.id
                },
                bindUser() {
                    adminApi_bindCustomServiceUser(this.bindForm).then(res => {
                        this.$message.success('绑定成功')
                        this.bindShow = false
                    })
                },
                setPwd(row) {
                    this.$prompt('请输入新密码', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                    }).then(({ value }) => {
                        adminApi_setCustomServicePwd({id: row.id, password: value}).then(res => {
                            this.$message.success('修改成功')
                        })
                    })
                }
            },
        })
    </script>
    </body>

@endsection
